<template>
  <div id="record" shadow="hover" @click="clickRecordHandler(record.recordId)">
    <div id="img">
      <!-- <img id="under" src="../../assets/img/record_bg.png" alt="" /> -->
      <img id="above" :src="record.image" alt="" />
    </div>
    <div id="info">
      <div class="title">{{ record.groupName }}：{{ record.subject }}</div>
      <hr />
      <div class="base_info">
        <i class="el-icon-user"></i
        ><label> 主讲人：{{ record.lecturer }}</label>

        <i v-if="record.isWithTea == 1" class="el-icon-user"></i
        ><label v-if="record.teachers != null">
          参与教师：{{ record.teachers }}</label
        ><br />

        <i class="el-icon-time"></i
        ><label> 培训时间：{{ record.trainingDate }}</label>

        <i class="el-icon-alarm-clock"></i
        ><label> 培训时长：{{ record.duration }}分钟</label>

        <i class="el-icon-location-information"></i>
        <label> 培训地点：{{ record.trainingLocation }}</label>
      </div>
      <!-- <div class="content">
        <span class="sub">培训内容：</span><span>{{ record.content }}</span>
      </div> -->
    </div>
  </div>
</template>

<script>
import Config from "../views/config.js";
export default {
  props: {
    record: Object,
  },
  filters: {
    // contentFormatter(str) {
    //   let len = str.length;
    //   let max_len = 100;
    //   if (len <= max_len) {
    //     return str;
    //   }
    //   return str.substring(0, max_len) + " ... ...";
    // },
  },
  data() {
    return {};
  },

  created() {
    this.record.image = Config.picPrefixUrl + this.record.image;
  },

  methods: {
    clickRecordHandler(id) {
      // console.log("event", e);
      this.$router.push({
        name: "record",
        params: {
          recordId: id,
        }
      })
    },
  },
};
</script>

<style lang="less" scoped>
#record {
  // min-width: 900px;
  background-color: rgba(255, 255, 255, 0.925);
  padding: 5px 10px;
  border-radius: 10px;
  display: flex;
  flex-direction: row;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.178);

  #img {
    img {
      margin: 5px;
      height: 100px;
      width: 150px;
      border-radius: 10px;
      box-shadow: 3px 3px 3px black;
    }
  }

  #info {
    margin: 10px;
    margin-left: 30px;
    width: 100%;
    height: 100px;
    //   border: 1px black solid;

    .title {
      font-size: 18px;
      font-weight: bold;
    }

    .base_info {
      line-height: 30px;
      height: 60px;
      font-size: 15px;
      font-weight: normal;
      color: rgb(167, 163, 163);

      display: -webkit-box; /*作为弹性伸缩盒子模型显示*/
      -webkit-line-clamp: 2; /*显示的行数；如果要设置2行加...则设置为2*/
      overflow: hidden; /*超出的文本隐藏*/
      text-overflow: ellipsis; /* 溢出用省略号*/
      -webkit-box-orient: vertical; /*伸缩盒子的子元素排列：从上到下*/

      label {
        // display: inline-block;
        // min-width: 200px;
        margin-right: 30px;
      }
    }
    .content {
      height: 50px;
      line-height: 25px;
      margin: 5px 0px;
      color: rgb(114, 107, 107);
      letter-spacing: 1px;
      font-size: 15px;

      display: -webkit-box;
      -webkit-line-clamp: 2;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-box-orient: vertical;

      .sub {
        font-weight: bold;
      }
    }
  }
}

#record:hover {
  cursor: pointer;
}
</style>
